<template>
    <div class="container">
        <a-row class="dictionary">
            <a-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" class="dictionary-list">
                <yl-dict-filter @onSubmit="handleInitQuery" @onReset="handleResetQuery"></yl-dict-filter>
                <yl-multi-button-vue
                    :selectedRowKeys="selectedRowKeys"
                    @add="handleAddDict"
                    @multiDelete="handleMultiDelete"
                    @export="handleDownload"
                    :hideAdd="true"
                    :hideDelete="true"
                ></yl-multi-button-vue>
                <yl-list-table @handleCustomRow="handleSelectedChange" ref="child"></yl-list-table>
            </a-col>
            <a-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13" class="dictionary-detail">
                <yl-detail-table :checkedDict="checkedDict" @listTable="handelListTable"></yl-detail-table>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ylDictFilter from './components/dictFilter.vue';
import ylMultiButtonVue from '@/components/ylMultiButton.vue';
import ylListTable from './components/listTable/index.vue';
import ylDetailTable from './components/detailTable/index.vue';

import listTables from './components/listTable/listTables';
import useDelete from './components/listTable/useDelete';
import { getDownload } from '@/api/system';
import { PaginationQuery } from '@/types/table';

export default defineComponent({
    name: 'dict',
    components: {
        ylDictFilter,
        ylMultiButtonVue,
        ylListTable,
        ylDetailTable,
    },
    setup() {
        const child = ref();
        const { t } = useI18n();
        const state = reactive({
            checkedDict: {},
        });
        const { handleAddDict, selectedRowKeys, getTableData, tableQuery } = listTables;
        const { handleMultiDelete } = useDelete();
        const handleSelectedChange = (dict: NormalObj) => {
            state.checkedDict = dict;
        };
        // 导出部门数据
        const handleDownload = () => {
            let name = t('yl.dictionaryMgt');
            getDownload('/api/dict/download', name);
        };
        //
        const handelListTable = () => {
            console.log(child.value.tableQuery);
            child.value.getTableData(child.value.tableQuery);
        };
        // 初始化搜索
        const handleInitQuery = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            const params = Object.assign({}, tableQuery, query);
            getTableData(params);
        };
        // 重置搜索条件
        const handleResetQuery = () => {
            delete tableQuery.deptId;
            handleInitQuery(tableQuery);
        };

        return {
            handleAddDict,
            selectedRowKeys,
            handleMultiDelete,
            handleSelectedChange,
            handleDownload,
            handelListTable,
            child,
            ...toRefs(state),
            handleInitQuery,
            handleResetQuery,
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    .dictionary {
        @include flex;
        justify-content: space-between;
        &-list {
            min-width: 490px;
            padding: $width20;
            margin-bottom: $width10;
            @include border;
            box-shadow: $boxShadow;
        }
        &-detail {
            min-width: 520px;
            padding-left: $width10;
        }
    }
}
</style>
